<template>
  <div>
    <div class="stricky-header stricked-menu main-menu">
      <div class="sticky-header__content"></div>
    </div>
    <section class="page-header">
      <div
        class="page-header__bg"
        style="
          background-image: url(assets/images/backgrounds/page-header-bg-1-1.jpg);
        "
      ></div>

      <div class="container">
        <h2>Cart</h2>
        <ul class="thm-breadcrumb list-unstyled">
          <li>
            <a
              href="index.html"
              tppabs="https://www.17sucai.com/preview/776298/2021-05-10/oganik/index.html"
              >Home</a
            >
          </li>
          <li>/</li>
          <li><span>Cart</span></li>
        </ul>
      </div>
    </section>
    <section class="cart-page">
      <div class="container">
        <div class="table-responsive">
          <table class="table cart-table">
            <thead>
              <tr>
                <th>物品</th>
                <th>价格</th>
                <th>数量</th>
                <th>总计</th>
                <th>移除</th>
              </tr>
            </thead>
            <tbody>
              <tr :key="goods.id" v-for="goods in carts">
                <td>
                  <div class="product-box">
                    <img :src="goods.image" alt="" />
                    <h3>
                      <a :href="'product-details.html?id=' + goods.id">{{
                        goods.name
                      }}</a>
                    </h3>
                  </div>
                </td>
                <td>${{ goods.price }}</td>
                <td>
                  <div class="quantity-box">
                    <button type="button" class="sub" @click="goods.num--">
                      -
                    </button>
                    <input type="number" :id="goods.id" :value="goods.num" />
                    <button type="button" class="add" @click="goods.num++">
                      +
                    </button>
                  </div>
                </td>
                <td>${{ goods.price * goods.num }}</td>
                <td>
                  <el-button @click="carts.splice(goods, 1)"
                    ><i class="organik-icon-close remove-icon"></i
                  ></el-button>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="row">
          <div class="col-lg-8">
            <form action="#" class="contact-one__form">
              <input type="text" placeholder="Enter Coupon Code" />
              <button type="submit" class="thm-btn">使用优惠卷</button>
            </form>
          </div>
          <div class="col-lg-4">
            <ul class="cart-total list-unstyled">
              <li>
                <span>预计</span>
                <span>${{ Subtotal }} USD</span>
              </li>
              <li>
                <span>优惠</span>
                <span>${{ ShippingCost }} USD</span>
              </li>
              <li>
                <span>总计</span>
                <span>${{ Total }} USD</span>
              </li>
            </ul>
            <div class="button-box">
              <a href="#" class="thm-btn">Update</a>
              <a href="checkout.html" class="thm-btn">结算</a>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<style scoped>
.product-box > img {
  width: 115px;
  flex-shrink: 0;
  height: 122px;
}
</style>

<script>
export default {
  data() {
    return {
      CKEY: "BANDEER_CITY_CART",
      carts: null,
      Subtotal: null,
      ShippingCost: null,
      Total: null,
    };
  },
  watch: {
    "$parent.carts": {
      handler(n) {
        this.carts = n;
        localStorage.setItem(this.CKEY, JSON.stringify(n));
        this.getSubtotal();
      },
      deep: true, //为true，表示深度监听，这时候就能监测到a值变化
    },
  },
  mounted() {
    // 从父中取值
    // this.carts = this.$parent.carts;
    // this.getSubtotal();
  },
  methods: {
    getSubtotal() {
      this.Subtotal = this.Total = 0;
      this.carts.forEach((element) => {
        this.Subtotal += element.price * element.num;
      });
      this.ShippingCost = 0;
      this.Total = this.Subtotal - this.ShippingCost;
    },
  },
};
</script>
